<template>
  <el-dialog class="choose-validate-panel" :visible="visible" :modal="false" append-to-body @close="close">
    <div slot="title" style="font-weight: bold">选装信号</div>
    <el-scrollbar class="content" ref="scrollBar">
      <div class="top-title">{{ allSignals.length ? '应用车辆必须包含下列已选择的信号' : '无选装信号'}}</div>
      <el-checkbox-group v-model="optionalSignals" @change='uodateProductInfoList'>
        <el-checkbox v-for="item in allSignals" :key="item.id" :label="item" :value="item" class="err-item">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
    </el-scrollbar>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      allSignals: [],
      optionalSignals: []
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    graph: {}
  },
  computed: {
    ...mapState({
      productInfo: state => state.product.productInfo
    })
  },
  watch: {
    visible(val) {
      if (val) {
        this.initChooseItem()
      }
    }
  },
  methods: {
    async initChooseItem() {
      const res = await this.getSignal('vehicleSignal')
      const allNodes = this.graph.getNodes()
      const signalIds = [] // 内部过滤用
      const allSignals = []
      // 场景库、自动触发、自动退出、前置节点
      const sceneLibNodes = ['SceneLibSceneNode', 'SceneLibAutoTouchNode', 'SceneLibAutoExitNode', 'SceneLibFrontConditionNode']
      allNodes.forEach(node => {
        const nodeData = node.getData()
        const nodeComponent = nodeData?.additionalInfo?.component
        // 获取场景全部信号
        if (sceneLibNodes.includes(nodeComponent)) {
          if (nodeData.configuration && nodeData.configuration.subScenes?.length) {
            nodeData.configuration.subScenes.forEach(group => {
              group.signals.forEach(signal => {
                if (signal.signalGroup === 'vehicleSignal' && !signalIds.includes(signal.metaModelId) && signal.optionalFlag === 1) {
                  signalIds.push(String(signal.metaModelId))
                  const findSignal = res.signals.find(sig => sig.id === signal.metaModelId) // 获取最外层非结构体信号
                  allSignals.push(findSignal)
                }
              })
            })
          }
        }
        // 获取状态变化信号
        if (nodeComponent === 'AdvancedLibStateChangeNode') {
          const signals = nodeData?.configuration?.signals
          if (signals?.length) {
            signals.forEach(signal => {
              if (!signalIds.includes(signal.metaModelId) && signal.optionalFlag === 1) {
                signalIds.push(String(signal.metaModelId))
                const findSignal = res.signals.find(sig => sig.id === signal.metaModelId) // 获取最外层非结构体信号
                allSignals.push(findSignal)
              }
            })
          }
        }
      })
      this.allSignals = allSignals
      // 更新已选信号
      this.optionalSignals = []
      this.productInfo.optionalSignals.forEach(item => {
        const existSignal = allSignals.find(signal => signal.interfaceBid === item.interfaceBid && signal.serviceBid === item.serviceBid)
        if (existSignal) {
          this.optionalSignals.push(existSignal)
        }
      })
      this.uodateProductInfoList()
    },
    uodateProductInfoList() {
      this.$store.dispatch('product/updateSignalList', this.optionalSignals)
    },
    close() {
      this.$emit('update:visible', false)
    },
    ...mapActions('signal', ['getSignal'])
  }
}
</script>

<style lang="scss">
.choose-validate-panel {
  .el-dialog {
    position: absolute;
    top: 16px;
    left: auto;
    right: 16px;
    width: 500px;
    transform: none;
    margin: auto!important;
  }
  .el-dialog__body {
    padding: 24px;
    overflow: hidden;
  }
  .content {
    height: 400px;
    .top-title{
      margin-bottom: 20px;
    }
    .err-item{
      display: block;
      margin-bottom: 16px;
    }
    .el-scrollbar__wrap {
      overflow-x: auto;
    }
  }
}
.choose-validate-panel.el-dialog__wrapper {
  left: 296px;
  top: 60px;
}
</style>
